<template>
    <Layout>
        <!-- top -->
        <div class="TopBanner">
            <div class="container">
                <div class="row row--30">
                    <div class="col-lg-12">
                        <p class="Banner-ti">产品中心 产品中心</p>
                        <h2 class="Banner-Zhong">让API数据服务</h2>
                        <h2 class="Banner-Bot">成为您创新的引擎</h2>
                    </div>
                    <div class="col-lg-12">
                        <p class="Banner-Cul"><span>精雕细琢十载</span>|<span
                                style="margin: 0px 2px;">API安全稳固</span>|<span>品质之选</span></p>
                    </div>
                    <div class="col-lg-12">
                        <div class="BannerBotBtn">
                            <button class="BannerBotBtn-1" @click="ShowNow">立即咨询</button>
                            <!-- <button class="BannerBotBtn-2" @click="NowRegister">立即注册</button> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分类 -->
        <div class="ProductClass">
            <div class="container">
                <el-row class="ProClassRowOne">
                    <el-col :span="24">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="Handselect">
                            <el-menu-item index="0">全部</el-menu-item>
                                <el-menu-item index="1">短信服务</el-menu-item>
                                <el-menu-item index="2">身份核验</el-menu-item>
                                <el-menu-item index="3">运营商</el-menu-item>
                                <el-menu-item index="4">银行卡</el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
                <el-row :gutter="10" style="margin: 20px 0 20px 0;">
                    <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" v-for="(itemleix, index) in productLeixing" :key="index" v-if="activeIndex==0">
                        <div class="ProClassRowTwo" @click="goToProduct()">
                            <div class="ProClsRowTwoTi">
                                <img src="../assets/images/banner/News1.png" alt="">
                                <h4>{{ itemleix.name }}</h4>
                            </div>
                            <p style="font-size: 12px;" class="ProClassRowContent">{{ itemleix.title }}</p>
                            <div class="ProClsRowMinTx">
                                <span style="font-size: 8px;">{{ itemleix.name2 }}</span>
                                <span style="font-size: 8px;">{{ itemleix.name3 }}</span>
                            </div>
                            <div class="MinMinBottom">
                                    付费
                                </div>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" v-for="(itemleix, index) in productLeixing1" :key="index" v-if="activeIndex==1">
                        <div class="ProClassRowTwo" @click="goToProduct()">
                            <div class="ProClsRowTwoTi">
                                <img src="../assets/images/banner/News1.png" alt="">
                                <h4>{{ itemleix.name }}</h4>
                            </div>
                            <p style="font-size: 12px;" class="ProClassRowContent">{{ itemleix.title }}</p>
                            <div class="ProClsRowMinTx">
                                <span style="font-size: 8px;">{{ itemleix.name2 }}</span>
                                <span style="font-size: 8px;">{{ itemleix.name3 }}</span>
                            </div>
                            <div class="MinMinBottom">
                                    付费
                                </div>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" v-for="(itemleix, index) in productLeixing2" :key="index" v-if="activeIndex==2">
                        <div class="ProClassRowTwo" @click="goToProduct()">
                            <div class="ProClsRowTwoTi">
                                <img src="../assets/images/banner/News1.png" alt="">
                                <h4>{{ itemleix.name }}</h4>
                            </div>
                            <p style="font-size: 12px;" class="ProClassRowContent">{{ itemleix.title }}</p>
                            <div class="ProClsRowMinTx">
                                <span style="font-size: 8px;">{{ itemleix.name2 }}</span>
                                <span style="font-size: 8px;">{{ itemleix.name3 }}</span>
                            </div>
                            <div class="MinMinBottom">
                                    付费
                                </div>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" v-for="(itemleix, index) in productLeixing3" :key="index" v-if="activeIndex==3">
                        <div class="ProClassRowTwo" @click="goToProduct()">
                            <div class="ProClsRowTwoTi">
                                <img src="../assets/images/banner/News1.png" alt="">
                                <h4>{{ itemleix.name }}</h4>
                            </div>
                            <p style="font-size: 12px;" class="ProClassRowContent">{{ itemleix.title }}</p>
                            <div class="ProClsRowMinTx">
                                <span style="font-size: 8px;">{{ itemleix.name2 }}</span>
                                <span style="font-size: 8px;">{{ itemleix.name3 }}</span>
                            </div>
                            <div class="MinMinBottom">
                                    付费
                                </div>
                        </div>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" v-for="(itemleix, index) in productLeixing4" :key="index" v-if="activeIndex==4">
                        <div class="ProClassRowTwo" @click="goToProduct()">
                            <div class="ProClsRowTwoTi">
                                <img src="../assets/images/banner/News1.png" alt="">
                                <h4>{{ itemleix.name }}</h4>
                            </div>
                            <p style="font-size: 12px;" class="ProClassRowContent">{{ itemleix.title }}</p>
                            <div class="ProClsRowMinTx">
                                <span style="font-size: 8px;">{{ itemleix.name2 }}</span>
                                <span style="font-size: 8px;">{{ itemleix.name3 }}</span>
                            </div>
                            <div class="MinMinBottom">
                                    付费
                                </div>
                        </div>
                    </el-col>
                </el-row>
                <!-- <el-row class="ChangeFenye">
                    <el-col :span="24">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[12, 24, 36, 48]" :page-size="12"
                            layout="total, sizes, prev, pager, next, jumper" :total="48">
                        </el-pagination>
                    </el-col>
                </el-row> -->
            </div>
        </div>

        <!-- 注册0 -->
        <RegisterPage></RegisterPage>


    </Layout>
</template>

<script>
import Layout from '../components/common/Layout'
import Separator from '../components/elements/separator/Separator'
import Icon from '../components/icon/Icon'
import Team from '../components/elements/team/Team'
import BlogPostMixin from '../mixins/BlogPostMixin'
import RegisterPage from '../components/register/register'
export default {
    name: 'productPage',
    components: {
        Team,
        Icon,
        Separator,
        Layout,
        RegisterPage
    },
    mixins: [BlogPostMixin],
    data() {
        return {
            activeIndex: "0",
            currentPage: 1,
            productLeixing:[
            {
                    id: 1,
                    name: '验证码短信服务',
                    name2: '快速高效',
                    name3: '高到达率',
                    title: '通过短信方式发送包含特定验证码的短信到用户手机上，以验证用户身份的安全机制。'
                },
                {
                    id: 2,
                    name: '营销短信服务',
                    name2: '高速稳定',
                    name3: '高到达率',
                    title: '通过短信发送具有营销性质的信息到用户手机上，帮助企业推广产品、服务和活动的解决方案。'
                },
                {
                    id: 3,
                    name: '会员短信服务',
                    name2: '灵活多样',
                    name3: '范围广泛',
                    title: '通过短信方式针对注册会员发送的具有个性化和专属优惠信息的短信服务。'
                },
                {
                    id: 4,
                    name: '二要素核验',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '通过姓名和身份证号进行真实性和一致性的验证。'
                },
                {
                    id: 5,
                    name: '运营商三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号、姓名、身份证三项是否一致。'
                },
                {
                    id: 6,
                    name: '运营商二要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号和姓名或者手机号和身份证号是否一致。'
                },
                {
                    id: 7,
                    name: '在网时长',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询手机号入网至今使用时间，判断号码的在网时长。'
                },
                {
                    id: 8,
                    name: '在网状态',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码的使用状态，在网/销号/停机/关机等。'
                },
                {
                    id: 9,
                    name: '二次放号',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码是否为运营商回收后重新放出来的号码，根据手机号码查询手机是否经过二次放号。'
                },
                {
                    id: 10,
                    name: '携号转网',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的实际所属运营商，如果是携转后的号码则查询到转入的运营商。'
                },
                {
                    id: 11,
                    name: '归属地查询',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
                {
                    id: 12,
                    name: '空号检测',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
                {
                    id: 13,
                    name: '银行卡三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行机构去核验银行卡是否为该姓名身份证身份信息所有。'
                },
                {
                    id: 14,
                    name: '银行卡四要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡是否为该姓名身份证身份信息所有，手机号是否为该银行卡预留绑定的手机号。'
                },
                {
                    id: 15,
                    name: '银行卡五要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡号、手机号、身份证号、姓名、银行账户类别，判断信息是否匹配。'
                },
            ],
            productLeixing1: [
            {
                    id: 1,
                    name: '验证码短信服务',
                    name2: '快速高效',
                    name3: '高到达率',
                    title: '通过短信方式发送包含特定验证码的短信到用户手机上，以验证用户身份的安全机制。'
                },
                {
                    id: 2,
                    name: '营销短信服务',
                    name2: '高速稳定',
                    name3: '高到达率',
                    title: '通过短信发送具有营销性质的信息到用户手机上，帮助企业推广产品、服务和活动的解决方案。'
                },
                {
                    id: 3,
                    name: '会员短信服务',
                    name2: '灵活多样',
                    name3: '范围广泛',
                    title: '通过短信方式针对注册会员发送的具有个性化和专属优惠信息的短信服务。'
                },
            ],
            productLeixing2: [
            {
                    id: 4,
                    name: '二要素核验',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '通过姓名和身份证号进行真实性和一致性的验证。'
                },
            ],
            productLeixing3: [
            {
                    id: 5,
                    name: '运营商三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号、姓名、身份证三项是否一致。'
                },
                {
                    id: 6,
                    name: '运营商二要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商核验实名的手机号和姓名或者手机号和身份证号是否一致。'
                },
                {
                    id: 7,
                    name: '在网时长',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询手机号入网至今使用时间，判断号码的在网时长。'
                },
                {
                    id: 8,
                    name: '在网状态',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码的使用状态，在网/销号/停机/关机等。'
                },
                {
                    id: 9,
                    name: '二次放号',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向运营商查询号码是否为运营商回收后重新放出来的号码，根据手机号码查询手机是否经过二次放号。'
                },
                {
                    id: 10,
                    name: '携号转网',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的实际所属运营商，如果是携转后的号码则查询到转入的运营商。'
                },
                {
                    id: 11,
                    name: '归属地查询',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
                {
                    id: 12,
                    name: '空号检测',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '查询手机号的开户地区。'
                },
            ],
            productLeixing4:[
            {
                    id: 13,
                    name: '银行卡三要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行机构去核验银行卡是否为该姓名身份证身份信息所有。'
                },
                {
                    id: 14,
                    name: '银行卡四要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡是否为该姓名身份证身份信息所有，手机号是否为该银行卡预留绑定的手机号。'
                },
                {
                    id: 15,
                    name: '银行卡五要素',
                    name2: '数据真实',
                    name3: '安全性高',
                    title: '向银行核验银行卡号、手机号、身份证号、姓名、银行账户类别，判断信息是否匹配。'
                },
            ]
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 跳转产品详情
        goToProduct(){
            this.$router.push({
                path: '/seekadfrom'
            })
        },
        ShowNow(){
            this.$router.push({
				    path: '/seekadfrom'
				})
        },
        NowRegister(){
            this.$router.push({
				    path: '/register'
				})
        },
        Handselect(index){
            this.activeIndex = index
        },
    }
}
</script>

<style scoped>
/* banner */
.TopBanner {
    width: 100%;
    margin: 0 auto;
    color: #fff;
    /* height: 700px; */
    /* background-color: #ccc; */
    background-image: url('../assets/images/banner/chanpindbgc.png');
    background-size: 100% 100%;

    .Banner-ti {
        margin-top: 5%;
        font-family: serif;
        font-size: 48px;
    }

    .Banner-Zhong {
        margin: 5px 0px;
        font-size: 68px;
        font-weight: 700;
    }

    .Banner-Bot {
        font-weight: 400;
        font-size: 68px;
        margin-bottom: 20px;
    }

    .Banner-Cul {
        margin-bottom: 4%;
        font-size: 20px;
    }


    .BannerBotBtn {
        display: flex;
        margin-bottom: 20%;


        .BannerBotBtn-1 {
            width: 160px;
            border: 2px solid #62C3D0;
            /* border: 3px solid transparent; */
            color: #62C3D0;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            margin: 0px 10px 0px 0px;
            height: 59px;
            background-color: transparent;
        }
        
        .BannerBotBtn-2 {
            width: 160px;
            border: 2px solid #e30083;
            color: #fff;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            height: 59px;
        
            margin: 0px 5px 0px 0px;
            background-color: #e30083;
        }
    }
    @media screen and (max-width: 1200px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 32px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 52px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 52px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 16px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 140px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 50px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 140px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                height: 50px;

                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 20px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 36px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 14px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 100px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 40px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 100px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                height: 40px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }

    @media screen and (max-width: 500px) {
        .Banner-ti {
            margin-top: 8%;
            font-family: serif;
            font-size: 16px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 20px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 12px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 80px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 30px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 80px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                height: 30px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }
}

/* 分类 */
.ProductClass {
    width: 100%;
    overflow: hidden;
    background-color: #fff;

    .ProClassRowOne {
        margin: 30px auto;
    }

    .ProClassRowTwo {
        /* height: 200px; */
        /* background-color: pink; */
        /* box-shadow: 1px 1px 1px #FFF; */
        box-shadow: 0 1px 10px rgb(180 195 255 / 30%);
        border-radius: 3px;
        padding: 10px 15px;
        box-sizing: border-box;
        margin: 0px 10px 10px 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border: 1px dashed #ccc;

    }

    .ProClassRowTwo:hover {
        transition: all 0.8s ease;
        /* 添加过渡效果 */
        background-color: #2966FF;

        h4,
        h5,
        div,
        p,
        span {
            color: #fff;
        }

        .MinMinBottom{
            background-color: #2966FF;
            border: 1px solid #fff;
        }
        .ProClsRowMinTx {
        span {
            border: 1px solid #ccc;
        }
    }

        cursor: pointer;
        box-shadow: 9px 9px 33px #d1d1d1,
        -9px -9px 33px #ffffff;
        transform: translateY(-2px);
    }

    .ProClsRowTwoTi {
        display: flex;
        align-items: center;
        box-sizing: border-box;

        img {
            width: 26px;
            margin-right: 5px;
        }
    }

    .ProClassRowContent {
        height: 40px;
        margin: 3px 0px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ProClsRowMinTx {
        span {
            display: inline-block;
            border: 1px solid #0d61ff;
            color: #0d61ff;
            margin:2px;
            border-radius: 2px;
            padding: 0px 1px;
            box-sizing: border-box;
        }
    }

    .MinMinBottom {
        display: flex;
        align-items: center;
        height: 30px;
        margin: 10px 0px;
        box-sizing: border-box;
    }


    .MinMinBottom {
        width: 80px;
        background-color: #ffeeec;
        display: flex;
        align-items: center;
        height: 40px;
        margin: 10px 0px;
        color: #ff8a41;
        font-weight: 700;
        box-sizing: border-box;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ChangeFenye {
        margin: 0px 0 20px 0;
        text-align: right;
    }
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
    background-color: #fff;
    color: #000;
}


.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover {
    background-color: var(--StrongBgc);
    transition: all 0.5s ease;
    color: #2966FF;
    font-size: 18px;
    font-weight: 700;
}

.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus {
    background-color: var(--StrongBgc);
    /* font-size: 16px; */
}

.el-menu--horizontal>.el-menu-item.is-active {
    color: #2966FF;
    font-size: 18px;
    border-bottom: 2px solid #2966FF;
    transition: 0.5s ease;
    font-weight: 700;

}
.el-menu--horizontal>.el-menu-item {
    padding: 0px 5px;
    margin: 0px 10px;
    height: 50px;
    line-height: 50px;
    transition: 0.3s ease;

}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #2966ff;

}
/* 分类 */
</style>